<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--v-if条件为false时，包含v-if指令的元素根本不会存在DOM中-->
  <h3 v-if="isShow">{{message}}</h3>

  <!-- v-show条件为false时，v-show只是给元素增加一个行内样式：display:none -->
  <h3 v-show="isShow">{{message}}</h3>
<!--需要在显示与隐藏中切换很频繁时，选择v-show
    如果只有一次切换时，通常使用v-if-->
</div>
<script src="../js/vue.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{
      message:'你好啊',
      isShow:true
    }
  })
</script>

</body>
</html>